<template>
  <div class="address-list">
    <div class="list-wrapper" ref="wrapper">
      <div>
        <div class="address-item" :class="{'default': item.isDefault}" v-for="(item,index) of addressList" :key="item.id">
          <mt-badge class="default-span" type="error" size="small">默认</mt-badge>
          <div class="content border-bottom">
            <div>
              <div class="userinfo oh" style="width:75%;">{{item.consignee}}&emsp;<span>{{item.phone}}</span></div>
              <div class="address oh">{{item.detailedAddress}}</div>
            </div>
          </div>
          <div class="operator" idx="0">
            <div class="set-default" @click="clickDefaultAddress(item.id)">设为默认地址</div>
            <router-link :to="{path:'/user-addedit',query: {addressId: item.id}}">
              <div class="edit-address">
                <img class="opr-icon" src="/static/img/icon_gray_edit2.png" alt="">
                <span class="opr-text" val="13">编辑</span>
              </div>
            </router-link>
            <div class="remove-address" @click="clickRemoveAddress(item.id, index)">
              <img class="opr-icon" src="/static/img/icon_gray_delete2.png" alt="">
              <span class="opr-text" val="13">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="address-add">
      <router-link to="user-addedit">
        <mt-button size="large" type="danger">添加地址</mt-button>
      </router-link>
    </div>
    <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import Bscroll from 'better-scroll'
import { MessageBox } from 'mint-ui'
import PublicMenu from '../public/Menu'
export default {
  name: 'Address',
  components: {
    PublicMenu
  },
  data () {
    return {
      addressList: [],
      kai: []
    }
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/address/getAddressList', {
        params: { memberId: this.$store.state.userId }
      }).then((res) => {
        res = res.data
        if (res.code === 0 && res.array) {
          this.addressList = res.array
          console.log(res.array)
        }
      })
    },
    clickRemoveAddress (res, index) {
      MessageBox.confirm('您确定要删除吗?').then((action) => {
        axios.get('/meimai/interface/address/removeAddress', {
          params: {memberId: this.$store.state.userId, addressId: res}
        }).then(() => {
          this.addressList.splice(index, 1)
        })
      })
    },
    clickDefaultAddress (res) {
      axios.get('/meimai/interface/address/updateAddress', {
        params: {memberId: this.$store.state.userId, addressId: res, isDefault: 1}
      }).then(() => {
        this.getInfo()
        this.$router.push('/user-address')
      })
    }
  },
  mounted () {
    this.getInfo()
    this.scroll = new Bscroll(this.$refs.wrapper, { click: true })
  }
}
</script>

<style lang="stylus" scoped>
.address-list >>> .mint-switch-input:checked + .mint-switch-core
  border-color: #ef4f4f;
  background-color: #ef4f4f;
.address-list
  background-color: #f3f3f3
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0.98rem
  .list-wrapper
    height: 90%
    overflow: hidden
    .address-item
      margin-bottom: .24rem
      position: relative
      .default-span
        position: absolute
        top: 6%
        right: 2%
        z-index: 1
        display: none
      .content
        background-color: white
        border-top: .02rem solid #eee
        padding: .2rem .3rem .3rem .4rem
        .userinfo
          font-size: .32rem
          color: #222
          height: .6rem
          line-height: .6rem
          vertical-align: bottom
          width: 100%
          display: inline-block
          overflow: hidden
          white-space: nowrap
          text-overflow: ellipsis
          width: 54%
        .address
          font-size: .28rem
          color: #888
          height: .6rem
          line-height: .6rem
          font-size: .28rem
          color: #888
          height: .6rem
          line-height: .6rem
          text-overflow: ellipsis
          width: 100%
          white-space: nowrap
      .operator
        background-color: white
        padding: .2rem .3rem .2rem .3rem
        .set-default
          width: 55%;
          display: inline-block;
          background-image: url(/static/img/icon_option_off.png);
          background-repeat: no-repeat;
          font-size: 13px;
          padding-left: 35px;
          color: #222;
          line-height: 25px;
          height: 25px;
          vertical-align: middle;
          box-sizing: border-box
        .edit-address
        .remove-address
          width: 20%
          display: inline-block
          line-height: .64rem
          height: .64rem
          color: #333
          .opr-icon
            width: .4rem
            height: .4rem
    .address-item.default .set-default
      background-image: url(/static/img/icon_option_on-orange.png)
      background-size: auto 100%
    .address-item.default .default-span
      display: block
  .address-add
    position: fixed
    left: .2rem
    right: .2rem
    bottom: 1.2rem
    text-align: center
</style>
